<template>
	<div class="add">
		<StatusTip v-if="pageTip.show" :status="pageTip.status"></StatusTip>
		<div v-else class="content">
			<div class="flowBox">
				<flow ref="flowRef" :treeData="flatTreeData" name="enterpriseName" id="id"></flow>
				<Tree
					v-if="treeVisible"
					class="treeCompones"
					parentId="parentId"
					name="enterpriseName"
					children="children"
					id="id"
					:treeData="resData"
					:title="'选择摄像头'"
					@onChecked="handleChecked"
					@onSelected="handleSelected"
					@onClose="handleTreeClose"
					:style="treeStyle"
				></Tree>
			</div>
			<fill class="fillComponent"></fill>
		</div>
	</div>
</template>

<script setup name="patrol">
import Tree from '@/views/Device/components/tree/index.vue';
import fill from './components/fill/index.vue';
import flow from './components/flow/index.vue';
import StatusTip from '@/components/StatusTip/index.vue';
import res from '@/views/Device/components/tree/data';
import { ref, reactive, onMounted, watch } from 'vue';
import bus from '@/utils/mitt';
const pageTip = reactive({
	show: true,
	status: 0
});
const treeVisible = ref(false);
const flowRef = ref(null);
const treeStyle = ref(null);
let resData = [];
let flatTreeData = [];
let nodeIndex = -1;
/** 监听tree组件关闭*/
const handleTreeClose = () => {
	treeVisible.value = false;
};
/** 监听tree组件选中*/
const handleSelected = keys => {
	let findItem = flatTreeData.find(item => item['id'] == keys[0]);
	bus.emit(`selected-${nodeIndex}`, findItem);
	treeVisible.value = false;
};
const handleChecked = () => {};
/** */
bus.on('showTree', index => {
	treeVisible.value = true;
	nodeIndex = index;
});
/** 扁平化数据 */
const generateFlat = (data, _children) => {
	const arr = [];
	for (let i = 0; i < data.length; i++) {
		const node = data[i];
		if (node[_children]) {
			let result = generateFlat(node[_children]);
			arr.push(...result);
		} else {
			arr.push(node);
		}
	}
	return arr;
};
/**dom渲染完成设置tree组件的位置 */
watch(
	() => flowRef.value,
	() => {
		const react = flowRef.value.elem.getBoundingClientRect();
		treeStyle.value = { left: `${react.right + 20}px`, top: `${react.top}px`, height: `${react.height}px` };
	}
);

setTimeout(() => {
	pageTip.show = true;
	let { code, data } = res;
	if (code == 200) {
		if (data?.length) {
			flatTreeData = generateFlat(data, 'children');
			resData = data;
			pageTip.show = false;
		} else {
			pageTip.status = 1;
		}
	} else {
		pageTip.status = 2;
	}
}, 100);
</script>

<style lang="less" scoped>
.add {
	padding: 16px 24px;
	height: 100%;
	background: url('@/assets/image/dot.svg');
	background-size: 18px 18px;
	.content {
		height: 100%;
		display: flex;
	}
	.flowBox {
		flex: 1;
		margin-right: 16px;
		display: flex;
		justify-content: center;
		position: relative;
		overflow: auto;
		.treeCompones {
			position: fixed;
			width: 240px;
		}
	}
	.fillComponent {
		width: 300px;
	}
}
</style>
